<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ShoppingBag, Refresh } from '@element-plus/icons-vue'
import { mycouponsAPI } from '@/http'

interface Coupon {
  couponId: number
  mycouponGetTime: string
  mycouponId: number
  mycouponNumber: string
  mycouponPrice: number
  mycouponStatus: number // 0已使用 1可用 2已过期
  userId: number
  xx: string // 过期时间
  yy: string // 满减条件
}

const coupons = ref<Coupon[]>([])
const activeTab = ref('all')
const loading = ref(false)

const fetchCoupons = async () => {
  try {
    loading.value = true
    coupons.value = await mycouponsAPI.getProductList()
  } catch (error) {
    console.error('获取优惠券失败:', error)
  } finally {
    loading.value = false
  }
}

const availableCount = computed(() => coupons.value.filter(c => c.mycouponStatus === 1).length)

const filteredCoupons = computed(() => {
  switch (activeTab.value) {
    case 'available': return coupons.value.filter(c => c.mycouponStatus === 1)
    case 'used': return coupons.value.filter(c => c.mycouponStatus === 0)
    case 'expired': return coupons.value.filter(c => c.mycouponStatus === 2)
    default: return coupons.value
  }
})

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '.')
}

const getStatusText = (status: number) => {
  return ['已使用', '可用', '已过期'][status] || ''
}

const parseCondition = (yy: string) => {
  const matches = yy.match(/满(\d+)减(\d+)/)
  return matches ? `满${matches[1]}减${matches[2]}` : yy
}

onMounted(fetchCoupons)
</script>

<template>
  <div class="coupon-container">
    <div class="header">
      <div class="title">
        <el-icon :size="28"><ShoppingBag /></el-icon>
        <span>我的优惠券</span>
      </div>
      <p class="count">可用优惠券: {{ availableCount }}张</p>
    </div>

    <div class="tabs">
      <button 
        v-for="tab in ['全部', '可用', '已使用', '已过期']" 
        :key="tab"
        :class="{ active: activeTab === ['all', 'available', 'used', 'expired'][['全部', '可用', '已使用', '已过期'].indexOf(tab)] }"
        @click="activeTab = ['all', 'available', 'used', 'expired'][['全部', '可用', '已使用', '已过期'].indexOf(tab)]"
      >
        {{ tab }}
      </button>
    </div>

    <div v-if="loading" class="loading">
      <div class="spinner"></div>
    </div>

    <div v-else class="coupon-list">
      <div 
        v-for="coupon in filteredCoupons" 
        :key="coupon.mycouponId"
        class="coupon-card"
        :class="{
          'used': coupon.mycouponStatus === 0,
          'expired': coupon.mycouponStatus === 2
        }"
      >
        <div class="value">
          <span class="symbol">¥</span>
          <span class="amount">{{ coupon.mycouponPrice }}</span>
        </div>
        
        <div class="details">
          <div class="info">
            <h3>优惠券 {{ coupon.mycouponNumber.slice(-4) }}</h3>
            <p>{{ parseCondition(coupon.yy) }}</p>
          </div>
          
          <div class="meta">
            <span>领取: {{ formatDate(coupon.mycouponGetTime) }}</span>
            <span>到期: {{ formatDate(coupon.xx) }}</span>
          </div>
        </div>
        
        <div class="status">
          <span v-if="coupon.mycouponStatus === 1" class="use-btn">使用</span>
          <span v-else class="status-text">{{ getStatusText(coupon.mycouponStatus) }}</span>
        </div>
      </div>

      <div v-if="!loading && coupons.length === 0" class="empty">
        <el-icon :size="48"><Refresh /></el-icon>
        <p>暂无优惠券</p>
        <button @click="fetchCoupons">刷新</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.coupon-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 24px;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
}

.count {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tabs button {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
}

.tabs button.active {
  color: #ff9500;
  font-weight: 500;
}

.tabs button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: #ff9500;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 149, 0, 0.2);
  border-top-color: #ff9500;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.coupon-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  position: relative;
}

.coupon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.coupon-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #ff9500;
  border-radius: 12px 0 0 12px;
}

.coupon-card.used::before {
  background: #999;
}

.coupon-card.expired::before {
  background: #f56c6c;
}

.value {
  min-width: 90px;
  text-align: center;
  color: #ff9500;
  font-weight: bold;
}

.symbol {
  font-size: 16px;
}

.amount {
  font-size: 32px;
  line-height: 1;
}

.coupon-card.used .value,
.coupon-card.expired .value {
  color: #999;
}

.details {
  flex: 1;
  padding: 0 16px;
}

.info h3 {
  font-size: 16px;
  margin: 0 0 4px;
}

.info p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.status {
  min-width: 60px;
  text-align: center;
}

.use-btn {
  display: inline-block;
  padding: 6px 16px;
  background: #ff9500;
  color: white;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.use-btn:hover {
  background: #e68600;
  transform: translateY(-1px);
}

.status-text {
  font-size: 12px;
  color: #999;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;
}

.empty p {
  margin: 12px 0 16px;
  font-size: 14px;
}

.empty button {
  padding: 8px 24px;
  background: #ff9500;
  color: white;
  border: none;
  border-radius: 18px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.empty button:hover {
  background: #e68600;
  transform: translateY(-1px);
}
</style>